<template>
    <div class="container">
        <div class="loginWin">
            <div class="logo-title" @click.native="showToken()">SnailHD</div>
            <mt-field class="mt-xs" label="手机号" placeholder="请输入手机号" type="tel" v-model="loginParam.loginName"></mt-field>
            <mt-field class="mt-xs" label="密码" placeholder="请输入密码" type="password" v-model="loginParam.password"></mt-field>
            <mt-button  type="primary" class="mt-xs btn-login" @click.native="login()" >登陆</mt-button>
        </div>
    </div>
</template>

<script>
import http from '@/libs/http';
export default {
    name: 'login',
    data () {
        return {
            loading:false,
            loginParam:{
                loginName:"",
                password:""
            }
        }
    },
    methods:{
        init(){
            //this.changePage(1);
        },
        login () {
            this.loading  = true;
            var me = this;
            http.post('/user/login',this.loginParam,function(data){
                console.info(data)
                me.loading  = false;
                if(data.code=='0000'){
                    localStorage.token = data.result.token
                    me.$router.push({path:'/accountBook'})
                }

            })
        },
        showToken(){
            console.info(localStorage.token)
        }



    },
    mounted () {
        //this.init();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .container {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        background-image: url("../assets/loginBackground.jpg");
        background-size: 100% 100%;
    }
    .loginWin{
        width: 23rem;
        height: 23rem;
        /* background: #3f3f3f; */
        margin: auto;
        text-align: center;
    }
    .logo-title{
        font-size: 2rem;
        font-weight: bolder;
        height: 8rem;
    }

    .btn-login{
        width: 100%;
    }
</style>
